<template>
  <div>
    <div class='header'>
      <van-nav-bar
        title="当前城市"
        @nav-bar-arrow-size="30"
        @click-left="handLeft"
      >
        <template #left>
          <van-icon name="cross" size="20" color="gray" />
        </template>
      </van-nav-bar>
      <van-search v-model="value" placeholder="输入城市名或拼音"/>
    </div>

    <div v-if='value' class='search_city'>
      <ul>
        <li v-for='(data,index) in compList' :key="index" @click="handleGo(data.cityId,data.name)">
          {{data.name}}
        </li>
      </ul>
    </div>
    <div v-else>
      <div class='hotCity'>
        <p>热门城市</p>
        <div class='citys'>
          <ul>
            <li v-for="(data,index) in HotCity" :key="index" @click="handleGo(data.cityId,data.name)">
              {{data.name}}
            </li>
          </ul>
        </div>
      </div>
      <van-index-bar highlight-color="gray" :index-list="cityComp" @change='handleChange'>
        <div v-for="(data, index) in cityList" :key="index">
          <van-index-anchor :index="data.type" class='nav'/>
          <van-cell
            :title="item.name"
            v-for="item in data.title"
            :key="item.cityId"
            @click="handleGo(item.cityId,item.name)"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>
<script>
import http from '@/util/http'
import { Toast } from 'vant'
import { mapMutations } from 'vuex'
import mixins from '@/util/mixins'
export default {
  mixins: [mixins],
  data () {
    return {
      cityList: [],
      HotCity: [],
      value: '',
      searchList: []
    }
  },
  methods: {
    ...mapMutations(['clearCityData', 'changeCity']),
    handleChange (data) {
      Toast(data)
    },
    handLeft () {
      this.$router.back()
    },
    renderCities (list) {
      const cityList = []
      const letterList = []
      const HotCity = []
      for (let i = 65; i < 91; i++) {
        letterList.push(String.fromCharCode(i))
      }

      letterList.forEach((letter) => {
        const lists = list.filter(
          (item) => item.pinyin.substring(0, 1).toUpperCase() === letter
        )
        const Hots = list.filter(
          (item) => item.pinyin.substring(0, 1).toUpperCase() === letter && item.isHot === 1
        )
        // 热门城市
        Hots.length > 0 && HotCity.push(Hots)

        // 全部城市
        lists.length > 0 &&
         cityList.push({
           type: letter,
           title: lists
         })
      })
      this.isHot(HotCity)
      return cityList
    },
    isHot (HotCity) {
      HotCity.forEach(item => {
        if (item.length > 1) {
          this.HotCity = [...this.HotCity, ...item]
          HotCity.slice(item)
        } else {
          this.HotCity = [...this.HotCity, ...item]
        }
      })
    },
    handleGo (id, name) {
      this.clearCityData()
      this.changeCity({ id, name })
      this.$router.back()
    }
  },
  computed: {
    cityComp () {
      return this.cityList.map(item => item.type)
    },
    compList () {
      return this.searchList.filter(
        item => item.pinyin.toUpperCase().includes(this.value.toUpperCase()) ||
        item.name.includes(this.value)
      )
    }
  },
  mounted () {
    http({
      url: '/gateway?k=8572855',
      headers: {
        'X-Host': 'mall.film-ticket.city.list'
      }
    }).then((res) => {
      this.searchList = res.data.data.cities
      this.cityList = this.renderCities(res.data.data.cities)
    })
  }
}
</script>
<style lang="scss" scoped>
// 搜索后的城市列表
.search_city{
  width: 100%;
  ul{
    padding:0 15px;
    li{
      height: 44px;
      color: #191a1b;
      line-height: 44px;
      border-bottom:1px solid rgba(128, 128, 128, 0.161);
      font-size: 13px;
    }
  }
}
.header{
  position: sticky;
  top:0;
  z-index: 999;
}
// 热门城市
.hotCity{
  background: white;
  padding:15px 0 0 15px;
  p{
    font-size: 13px;
  }
  .citys{
    margin-top:10px;
    ul{
      overflow: hidden;
      li{
        width: 99px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        margin:0 7px 15px;
        background: #f4f4f4;
        text-align: center;
        float: left;
        color:#191a1b;

      }
    }
  }
}

.van-nav-bar__title {
  font-size: 17px;
}
.van-search {
  height: 49px;
  background: #f4f4f4;
  .van-search__content {
    background: white;
    font-size: 20px;
    .van-cell {
      font-size: 13px;
    }
  }
}
.nav{
  background: rgb(240, 239, 239);
}
</style>
<style>
.van-toast--html, .van-toast--text{
  min-width:0px;
}
</style>
